<style lang="less" scoped>

.cankao_data{
  background: white;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
  width: 61vw;
  
  margin-left: 18.5vw;
  .cailiaolist_data{
    background-image: url(../../../images/ditu3.jpg);
    background-size:100% 100%;
    width: 61vw;
    min-height: 39vw;
  }
  .title{
    font-size: 1.1vw;
  }
  // .cailiaoitemtitle{
  //     font-size: 0.9vw;
  //     line-height: 1.5vw;
  //     margin-left: 2vw;;
  // }
  // .cailiaoitem_data{
  //   cursor:pointer;
  //   margin-top: 1vw;
  //   margin-left: 2vw;
  // }
  .cankaoitemtitle:hover{
      color: #fa4400;
    }
  .cankaoitem_data{
      cursor:pointer;
      margin-top: 1vw;
    }
  .cankaoitemtitle{
        font-size: 0.85vw;
        line-height: 1.5vw;
        margin-left: 2vw;
      }

}
</style>
<template>
  <div class="main">
    <MainUser></MainUser>
    <div v-if="size>20" style="height:3.2vw"></div>
    <affix v-if="size>20" style="margin-top:-3.2vw">
       <MainTitle  @sousuo="titleSousuo" ref="maintitle"></MainTitle>
    </affix>
    <MainTitle v-if="size<=20"  @sousuo="titleSousuo" ref="maintitle"></MainTitle>
    <div class="cankao_data">
      <div style="height:0.5vw;"></div>
      <div class="title">参考图库</div>
      <div class="cailiaolist_data" v-loading="loading">
        <el-row :gutter="20" >
          <el-col :span="12" >
            <div v-if="reference_gallerylist1.length == 0" class="cankaoitem_data"></div>
            <div   v-for="item in reference_gallerylist1" class="cankaoitem_data" @click="downxilie(item.id)">
              <div class="cankaoitemtitle" v-html="item.title"></div>
            </div>
          </el-col>
          <el-col :span="12" >
            <div v-for="item in reference_gallerylist2" class="pdfitem_data" @click="downxilie(item.id)">
              <div class="cankaoitemtitle" v-html="item.title"></div>
            </div>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="20">
          <div v-for="item in reference_gallerylist" class="cailiaoitem_data" @click="downxilie(item.id)">
              <div class="cailiaoitemtitle" v-html="item.title"></div>
          </div>
        </el-row> -->
      <div style="height:5vw;"></div>
    </div>
      <div style="height:1vw;"></div>
      <el-pagination
        background
        style="text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="prev, pager, next,sizes"
        :current-page="pagintion.page"
        :page-sizes="pagesizes"
        :page-size="pagintion.page_size"
        :total="pagintion.total">
      </el-pagination>
      <div style="height:1vw;"></div>
    </div>
    
  </div>
</template>
<script>
import { reference_gallerys } from '@/request/api';
import MainTitle from '../main_title'
import MainUser from '../main_user'
export default {
    data() {
        return {
            reference_gallerylist1:[
            ],
            reference_gallerylist2:[
            ],
            pagintion: {
              total: 0,
              page_size:15,
              page: 1,
            },
            loading:false,
            pagesizes: [15],
            keywords:'',
            size:0
        }
    },
    mounted() {
      if(this.$route.query.keywords != undefined){
        this.keywords = this.$route.query.keywords;
        this.$refs.maintitle.setinput2(this.keywords);
      }
      this.getreference_gallerys();
    },
    methods: {
      downxilie(id){
        let routeUrl = this.$router.resolve({
            path: 'jlb_cankao',
            query: {'id': id}
        });
        window.open(routeUrl.href, '_blank');
      },
      //翻页
      handleCurrentChange(val) {
        this.pagintion.page = val;
        this.getreference_gallerys();
      },
      //修改条数
      handleSizeChange(val){
        this.pagintion.page_size = val;
        this.getreference_gallerys();
      },

      //获取系列列表数据
      getreference_gallerys(){
          // var param = {};
          // param.page = this.pagintion.page;
          // param.size = this.pagintion.page_size;
          // param.keywords = this.keywords;
          // this.loading = true;
          // reference_gallerys(param).then(res => {
          //   this.loading = false;
          //   if(res.ok){
          //       this.reference_gallerylist = res.data.data;
          //       this.pagintion.total = res.data.total;
          //       this.size = this.reference_gallerylist.length;
          //   }
          // })


          var param = {};
          param.page = this.pagintion.page;
          param.size = this.pagintion.page_size;
          param.type = 1;
          param.keywords = this.keywords;
          this.loading = true;
          reference_gallerys(param).then(res => {
            this.loading = false;
            if(res.ok){
              if(this.pagintion.total < res.data.total){
                this.pagintion.total = res.data.total;
              }
              this.reference_gallerylist1 = res.data.data;
            }
          });
          param.type = 2;
          reference_gallerys(param).then(res => {
            this.loading = false;
            if(res.ok){
              if(this.pagintion.total < res.data.total){
                this.pagintion.total = res.data.total;
              }
              this.reference_gallerylist2 = res.data.data;
            }
          });
        },
      titleSousuo(keywords){
        this.keywords = keywords;
        this.getreference_gallerys();
      }
    },
    components: {
        MainTitle,
        MainUser
    },

}
</script>
